<template>
  <span
    class="yt-call"
    v-bind="$attrs"
    @click.stop.prevent="callPhone">
    {{currentTel}}
  </span>
</template>

<script type="text/ecmascript-6">
  import { ActionSheet } from '../service'
  import { bridge } from '../utils'

  export default {
    name: 'yt-call',
    props: {
      /**
       * 电话号码
       */
      tel: {
        required: true
      }
    },
    computed: {
      currentTel() {
        return Array.isArray(this.tel) ? this.tel.map(item => item.tel).filter(v => v).join(",") : this.tel
      }
    },
    methods: {
      callPhone() {
        if (!this.tel) return
        let actions = []
        if (Array.isArray(this.tel)) {
          actions = this.tel.map(item => {
            return {
              ...item,
              click: () => {
                bridge.CallPhone(item.tel + '')
              }
            }
          })
        } else {
          actions = [{
            text: '拨打电话',
            click: () => {
              bridge.CallPhone(this.tel + '')
            }
          }]
        }
        ActionSheet(actions)
      }
    }
  }
</script>
